<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <style>
        .outerElement {
            width: 200px;
            height: 300px;
            background-color: rgb(197, 71, 71);
        }

        .innerElement {
            width: 120px;
            height: 100px;
            background-color: rgb(156, 220, 246);
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定 -->
        <!-- .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() -->
        <form v-on:submit.prevent="onSubmit">...</form>

        <!-- 事件修饰符 -->
        <!-- 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 -->
        <!-- 当点击里面元素，由内向外传递到外面元素也被点击点击事件也执行，即冒泡 -->
        <div class="outerElement" @click="doThis1">
            <!-- 当点击内部元素 输出：里面元素被 click 外面元素被 click -->
            <p class="innerElement" @click="doThis2">点击</p>
        </div>

        <!-- 所以我们需要阻止单击事件继续传播，即阻止冒泡 用 .stop -->
        <div class="outerElement" @click="doThis1">
            <!-- 当点击内部元素 输出：里面元素被 click -->
            <p class="innerElement" @click.stop="doThis2">点击内部元素</p>
        </div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 用 .self -->
        <div class="outerElement" @click.self="doThis1">
            <!-- 当点击内部元素 输出：里面元素被 click -->
            <p class="innerElement" @click="doThis2">点击内部元素</p>
        </div>

        <!-- 添加事件监听器时使用事件捕获模式 用 .capture -->
        <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <!-- 即内部元素触发的事件，外部先处理后再内部元素处理 -->
        <div class="outerElement" @click.capture="doThis1">
            <!-- 当点击内部元素 输出： 外面元素被 click 里面元素被 click -->
            <p class="innerElement" @click="doThis2">点击内部元素</p>
        </div>


        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>

        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat"></a>

        <!-- 点击事件将只会触发一次 -->
        <a v-on:click.once="doThis"></a>

        <!-- --------------------------- -->
        <!-- 按键修饰符 -->
        <!-- 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： -->
        <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
        <input v-on:keyup.enter="submit">
        <!-- 将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。 -->
        <input v-on:keyup.page-down="onPageDown">

        <!-- 按键码 -->
        <!-- 注：keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。 -->
        <input v-on:keyup.13="submit">
        <!-- 为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名： -->
        <!-- .enter、.tab、.delete、.esc、.space、.up 等等-->
        <!-- 你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：-->
        <!-- Vue.config.keyCodes.f1 = 112 可以使用 `v-on:keyup.f1`-->

        <!-- ---------------------- -->
        <!-- 系统修饰键 -->
        <!-- Alt + C -->
        <input v-on:keyup.alt.67="clear">
        <!-- Ctrl + Click -->
        <div v-on:click.ctrl="doSomething">Do something</div>

        <!-- exact 修饰符 -->
        <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
        <button v-on:click.ctrl="onClick">A</button>
        <!-- 有且只有 Ctrl 被按下的时候才触发 -->
        <button v-on:click.ctrl.exact="onCtrlClick">A</button>
        <!-- 没有任何系统修饰符被按下的时候才触发 -->
        <button v-on:click.exact="onClick">A</button>

        <!-- 鼠标按钮修饰符 -->
        <!-- .left .right .middle -->
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                doThis1: function () {
                    console.log('外面元素被 click')
                },
                doThis2: function () {
                    console.log('里面元素被 click')
                }
            }
        })

    </script>
</body>

</html>